<template>
	<view class="bar" :style="'height:'+statusHeight+'px'"></view>
	<uni-nav-bar backgroundColor="none" title="消息" border="false">
	</uni-nav-bar>
	<view class="list">
		<view class="item" @click="goChat(item)" v-for="item in list.info">
			<view class="left">
				<image src="../../static/user/user.png" class="img"></image>
			</view>
			<view class="right">
				<view class="top">
					<text>{{item.toName}}</text>
					<text :style="{color:item.online==1?'#56dba4':'#F05C3E'}">{{item.online==1?'在线':'离线'}}</text>
				</view>
				<view class="buttom" :style="{color:item.islook==false?'#F05C3E':'#666666'}">
					{{item.lastnew}} {{item.islook==false?'[未读]':''}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from "@dcloudio/uni-app";
	import api from '@/api/api'

	// 引入socket对象
	const {
		proxy
	} = getCurrentInstance()
	const socket = proxy.$socket
	
	// 上线通知
	socket.on('reonline', (res) => {
		console.log(res)
		list.info=list.info.map(item => {
			if (item.toId == res) {
				item.online=1
			}
			return item
		})
	})



	// 接收消息
	socket.on('getmsg', (res) => {
		console.log(res, '消息页接收的消息')
		list.info.forEach(item => {
			if (item.roomId == res.data.roomId) {
				item.lastnew=res.data.msg
				item.islook=false
			}
		})
	})
	// 离线通知
	socket.on('disonline', (res) => {
		list.info=list.info.map(item => {
			if (item.toId == res) {
				item.online=0
			}
			return item
		})
	})
	



	let statusHeight = ref(0)
	onLoad(() => {
		uni.getSystemInfo({
			success: function(res) {
				statusHeight.value = res.statusBarHeight
			}
		})

	})
	let list = reactive({
		info: {}
	})
	onShow(() => {
		api.getNewsList({
			fromId: uni.getStorageSync('info').personId
		}).then(res => {
			console.log(res.data)
				list.info=res.data.map(item=>{
				item.islook==true
				return item
			})
		
		})
		

	})


	const goChat = (item) => {
		uni.navigateTo({
			url: '/pages/news/chat?toName=' + item.toName + '&toId=' + item.toId + '&roomId=' + item.roomId
		})
	}
</script>

<style lang="scss">
	.uni-navbar {
		.uni-navbar__content {
			border: 0 none !important;
		}
	}

	.list {
		margin: 30rpx;

		.item {
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
			background-color: white;
			padding: 20rpx;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.left {
				padding-right: 20rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.right {
				flex: 1;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					text:first-child {
						font-size: 32rpx;
						font-weight: bold;
					}

					text:last-child {
						font-size: 24rpx;
						color: #666666;
					}
				}

				.buttom {
					margin-top: 10rpx;
					color: #666666;
					font-size: 28rpx;
				}

			}

		}
	}
</style>
